Estoy usando pestañas MUI y tengo el siguiente error:
MUI: el value proporcionado al componente Tabs no es válido. La pestaña con este value ("0") no forma parte del diseño del documento. Asegúrese de que el elemento de la pestaña esté presente en el documento o que no se display: none .
El código es muy similar a los ejemplos de MUI que también están generando este mismo problema.
Encontré una solución, tal vez no la mejor, pero funciona
Entendí que el problema es que el componente de pestañas intenta cargar sus pestañas secundarias antes de que existan. Entonces la idea es introducir un retraso en su generación usando setTimeout:
import * as React from 'react'; import Box from '@mui/material/Box'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; import Typography from '@mui/material/Typography'; function TabPanel(props) { const { children, value, index} = props; return ( value === index && ( <Typography>{children}</Typography> ) ); } export default function BasicTabs() { const [value, setValue] = React.useState(0); const [activateTab, setActivateTab] = React.useState(false); setTimeout(()=>{ setActivateTab(true) },100) const tabsArr=[ { label:"Item One", key: `simple-tab-0`, }, { label:"Item Two", key: `simple-tab-1`, } ] const handleChange = (event, newValue) => { setValue(newValue); }; return ( <Box sx={{ width: '100%' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Tabs value = {value} onChange = {handleChange}> {activateTab && ( tabsArr.map((item)=>( <Tab {...item} /> )) ) } </Tabs> </Box> <TabPanel value={value} index={0}>Item One</TabPanel> <TabPanel value={value} index={1}>Item Two</TabPanel> </Box> ); }Si no funciona, puede intentar aumentar la demora.
jajaja